<template>
	<view class="">
		<view class="" style="padding: 20rpx;display: flex;align-items: center;justify-content: space-between;">
			<view class="" style="width: 80%;">
				<u-search placeholder=" " v-model="form.keyword" :show-action="false" @search="getCustom()"></u-search>
			</view>
			<view class="" style="width: 16%;">
				<u-button type="primary" :custom-style="customStyle" @click="toAdd">
					<view class="" style="font-size: 40rpx;">
						+
					</view>
				</u-button>
			</view>
		</view>
		<view class="">
			<u-index-list :scrollTop="scrollTop" :index-list="indexList">
				<view v-for="(item, index) in indexList" :key="index">
					
					<u-index-anchor :index="item" />
					<view class="" v-if="item=='A'">
						<view class="customitem" v-for="(item,index) in customList.A" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='B'">
						<view class="customitem" v-for="(item,index) in customList.B" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='C'">
						<view class="customitem" v-for="(item,index) in customList.C" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='D'">
						<view class="customitem" v-for="(item,index) in customList.D" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='E'">
						<view class="customitem" v-for="(item,index) in customList.E" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='F'">
						<view class="customitem" v-for="(item,index) in customList.F" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='G'">
						<view class="customitem" v-for="(item,index) in customList.G" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='H'">
						<view class="customitem" v-for="(item,index) in customList.H" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='I'">
						<view class="customitem" v-for="(item,index) in customList.I" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='J'">
						<view class="customitem" v-for="(item,index) in customList.J" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='K'">
						<view class="customitem" v-for="(item,index) in customList.K" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='L'">
						<view class="customitem" v-for="(item,index) in customList.L" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='M'">
						<view class="customitem" v-for="(item,index) in customList.M" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='N'">
						<view class="customitem" v-for="(item,index) in customList.N" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='O'">
						<view class="customitem" v-for="(item,index) in customList.O" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='P'">
						<view class="customitem" v-for="(item,index) in customList.P" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='Q'">
						<view class="customitem" v-for="(item,index) in customList.Q" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='R'">
						<view class="customitem" v-for="(item,index) in customList.R" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='S'">
						<view class="customitem" v-for="(item,index) in customList.S" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='T'">
						<view class="customitem" v-for="(item,index) in customList.T" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='U'">
						<view class="customitem" v-for="(item,index) in customList.U" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='V'">
						<view class="customitem" v-for="(item,index) in customList.V" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='W'">
						<view class="customitem" v-for="(item,index) in customList.W" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='X'">
						<view class="customitem" v-for="(item,index) in customList.X" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='Y'">
						<view class="customitem" v-for="(item,index) in customList.Y" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
					<view class="" v-if="item=='Z'">
						<view class="customitem" v-for="(item,index) in customList.Z" @click="toDetail(item)">
							<image :src="item.avatar" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="item.avatar"></image>
							<image src="../../static/logo.png" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;" v-if="!item.avatar"></image>
							<text style="margin-left: 20rpx;">{{item.name}}</text>
						</view>
					</view>
				</view>
			</u-index-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					keyword:''
				},
				keyword: '',
				scrollTop: 0,
				customStyle: {
					width:'40rpx',
					height:'60rpx'
				},
				// indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U","V", "W", "X", "Y", "Z"],
				indexList: [],
				customList:{}
			}
		},
		onShow() {
			this.getCustom()
		},
		methods: {
			async getCustom(){
				var that = this
				const res = await this.$api.CustomerList(this.form)
				console.log(res)
				if(res.code == 1){
					this.indexList = res.data.letter
					this.customList = res.data.data
					console.log('customList',this.customList)
					// console.log(this.customList.L)
					// var v = []
					// for(var i=0;i<this.indexList.length;i++){
					// 	for (let key in that.customList) {
					// 	  if (that.customList.that.indexList[i](key)) {
					// 	    console.log(key);
					// 	  }
					// 	}
					// }
				}
				
			},
			toAdd(){
				uni.navigateTo({
					url:'/pages/custom/add'
				})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			toDetail(item){
				console.log(item)
				uni.navigateTo({
					url:'/pages/address/addressDetail?item='+JSON.stringify(item)
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
	.customitem{
		height: 100rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #f9f9f9;
		padding: 0 20rpx;
	}
</style>